<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
    <title>Document</title>
    <style>
        .thumb-box {
            text-align: center;
            margin-top: 50px;
        }
        
        .thumb {
            width: 250px;
            height: 250px;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>





<body>
    <div class="thumb-box">
        <!-- 头像 -->
        <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">


        <div class="mt-2">
            <!-- 文件选择框 -->
            <!-- accept 属性表示可选择的文件类型 -->

            <!-- image/* 表示只允许选择图片类型的文件  样式不能修改的！style="display: none;"-->
            <input type="file" id="iptFile" accept="image/*">


            <!-- 选择头像图片的按钮 -->
            <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
        </div>
    </div>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        $("#btnChoose").click(function() {
            //2.让原生按钮执行下点击
            $("#iptFile").click();
        });
        $("#iptFile").change(function(e) {
            //3.使用formData提交文件
            //参数名：avatar
            //文件：需要事件对象e
            // e.target:原生dom节点 input[type="file"]
            //原生属性：dom.files
            let file = e.target.file[0];
            //收集数据：
            let fd = new FormData();
            fd.append("avatar", file)
                // 4.提交数据
            axios({
                url: "http://www.liulongbin.top:3009/api/upload/avatar",
                method: "POST",
                data: res
            }).then(({
                data: res
            }) => {
                //5.提交成功后，需要把路径设置在上面的图片
                $("img").attr("src", "http://www.liulongbin.top:3009" + res.url);
            })
        })
    </script>
</body>

</html>